<template>
  <div class="home">
    <div class="order-btn" @click="handleGoOrder"></div>
    <div class="activity-rules-btn" @click="handleGoActRule"></div>
    <div class="home-head"></div>
    <div class="home-central">
      <!--加油-->
      <div class="central-card" @click="handleClick({sku_id:3052})">
        <div :class="storeData[3052] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--华润ole-->
      <div class="central-card" @click="handleClick({sku_id:3036})">
        <div :class="storeData[3036] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--华润blt-->
      <div class="central-card mt15" @click="handleClick({sku_id:3037})">
        <div :class="storeData[3037] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--云南白药-->
      <div class="central-card mt15" @click="handleClick({sku_id:3038})">
        <div :class="storeData[3038] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--猫眼电影-->
      <div class="central-card mt15" @click="handleClick({sku_id:3045})">
        <div :class="storeData[3045] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--雪兰-->
      <div class="central-card mt15" @click="handleClick({sku_id:3043})">
        <div :class="storeData[3043] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--微信立减金-->
      <div class="central-universal" @click="handleClick({sku_id:3041})">
        <div :class="storeData[3041] === 0 ? 'icon_no' : ''"></div>
      </div>
    </div>
    <div class="home-bottom">
      <!--美团券-->
      <div class="central-card" @click="handleClick({sku_id:3053})">
        <div :class="storeData[3053] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--711便利店-->
      <div class="central-card" @click="handleClick({sku_id:3051})">
        <div :class="storeData[3051] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--哈根达斯-->
      <div class="central-card mt15" @click="handleClick({sku_id:3047})">
        <div :class="storeData[3047] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--嘉华-->
      <div class="central-card mt15" @click="handleClick({sku_id:3044})">
        <div :class="storeData[3044] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--汉堡王-->
      <div class="central-card mt15" @click="handleClick({sku_id:3050})">
        <div :class="storeData[3050] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--盒马-->
      <div class="central-card mt15" @click="handleClick({sku_id:3034})">
        <div :class="storeData[3034] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--云南冷饮-->
      <div class="central-card mt15" @click="handleClick({sku_id:3048})">
        <div :class="storeData[3048] === 0 ? 'icon_no' : ''"></div>
      </div>
      <!--海格-->
      <div class="central-card mt15" @click="handleClick({sku_id:3049})">
        <div :class="storeData[3049] === 0 ? 'icon_no' : ''"></div>
      </div>
    </div>
  </div>
  <MoadleAccredit :show="accreditShow" @handleCheckedShow="handleCheckedShow" @handleAllowChange="handleAllowChange"/>
  <MoadleAccreditNotarize :show="accreditNotarizeShow"
                          @handleConfirmChange="handleConfirmChange"
                          @handleCancelChange="handleCancelChange"></MoadleAccreditNotarize>
  <FormPhoneVerify :show="phoneVerifyMoadleShow" @handleConfirmBtn="handlePhoneConfirmChange"
                   @handleCancelBtn="handlePhoneCancelChange"></FormPhoneVerify>
</template>
<script setup>
import MoadleAccredit from "./components/MoadleAccredit.vue";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from 'vue-router'
import MoadleAccreditNotarize from "./components/MoadleAccreditNotarize.vue";
import useUser from "@/store/user.js";
import {showFailToast, showToast} from "vant";
import FormPhoneVerify from "@/views/Home/components/FormPhoneVerify.vue";
import {isPhoneNumberValid, isUsercaptchaValue} from "@/utils/utils.js";
import {login, oauthCheck, skuStock} from "@/api/index.js";
import {calculateValidTime,isRefreshTokenExpired, getToken} from "@/utils/token.js";

const router = useRouter()
const route = useRoute()
const userInfo = useUser()
const accreditShow = ref(false) // 授权弹窗显示状态
const accreditNotarizeShow = ref(false) // 授权确认弹窗显示状态
const phoneVerifyMoadleShow = ref(false) // 手机验证弹窗
const path = ref('/actDetail');
const query = ref()
const storeData = ref({})

onMounted(() => {
  getOauthCheck()
  apiSkuStock()
  userInfo.access_token = localStorage.getItem("TOKEN1")

  if (route.params.loginShow) {
    if(isRefreshTokenExpired() || !userInfo.access_token){
      phoneVerifyMoadleShow.value = Boolean(route.params.loginShow)
    }
  }
  // 获取本地存储的值，判断是否已授权
  if (!localStorage.getItem('haveReadState')) {
    accreditShow.value = true
  }
})

// 选择阅读-回调
const handleCheckedShow = () => {
  accreditShow.value = false //隐藏授权弹窗
  accreditNotarizeShow.value = true //显示授权确认弹窗
}

//授权确认按钮-回调
const handleConfirmChange = () => {
  if (userInfo.haveReadState) {
    accreditNotarizeShow.value = false // 隐藏授权确认弹窗
    accreditShow.value = true //显示授权弹窗
  }
}

//授权取消按钮-回调
const handleCancelChange = () => {
  userInfo.handleHaveRead()
  accreditNotarizeShow.value = false // 隐藏授权确认弹窗
  accreditShow.value = true //显示授权弹窗
}

//允许按钮-回调
const handleAllowChange = () => {
  if (userInfo.haveReadState && userInfo.privacyPolicyChecked && userInfo.activityRulesChecked) {
    accreditShow.value = false // 隐藏授权弹窗
    userInfo.handleLocalStorageAccreditState()
  } else {
    showToast('请您阅读并勾选隐私政策和活动规则！')
  }
}

//手机验证弹窗-确认按钮回调
const handlePhoneConfirmChange = () => {
  isPhoneNumberValid(userInfo.userPhone)
  isUsercaptchaValue(userInfo.userCaptcha)
  apiGetLogin()
}
//手机验证弹窗-取消按钮回调
const handlePhoneCancelChange = () => {
  phoneVerifyMoadleShow.value = false
}

// 查看商品详情(skuId)
const handleClick = (params) => {
  query.value = params
  //判断token是否存在，不存在就唤起登录弹窗
  if (userInfo.access_token) {
    if (storeData.value[params.sku_id] === 0) {
      showToast('券已抢完')
    } else {
      router.push({path: '/actDetail', query: params})
    }
  } else {
    phoneVerifyMoadleShow.value = true
  }
}

//跳转到订单列表页面
const handleGoOrder = () => {
  path.value = '/order';
  //判断token是否存在，不存在就唤起登录弹窗
  if (userInfo.access_token) {
    router.push({path: '/order'})
  } else {
    phoneVerifyMoadleShow.value = true
  }
}

//跳转到活动规则页面
const handleGoActRule = () => {
  router.push({path: '/actRule'})
}

// 初始化 授权openID
const getOauthCheck = () => {
  oauthCheck('boc_bfkq_act').then((res) => {
    if (res.data.url) {
      // alert("授权返回url：" + JSON.stringify(res.data.url))
      location.href = res.data.url // 跳转授权链接
    }
  })
}
// 登录接口回调
const apiGetLogin = () => {
  login({mobile: userInfo.userPhone, sms_code: userInfo.userCaptcha}).then((res) => {
    if (res.code === 0) {
      // 存储 token相关的值
      userInfo.handleTokenChange(res.data.token)
      calculateValidTime(res.data.token.expires_in) // 计算token的有效时间
      phoneVerifyMoadleShow.value = false // 隐藏手机验证弹窗
      if (query.value && storeData.value[query.value.sku_id] === 0) {
        showToast('券已抢完')
      } else {
        router.push({path: path.value, query: query.value})
      }
    } else {
      showFailToast(res.msg);
    }
  }).catch((error) => {
    showFailToast(error.msg);
  })
}

const apiSkuStock = () => {
  skuStock().then((res) => {
    if (res.code !== 0) {
      showFailToast(res.msg)
    } else {
      storeData.value = res.data
    }
  }).catch((error) => {
    showFailToast(error.msg)
  })
}
</script>

<style lang="scss" scoped>
.home {
  width: 750px;
  min-height: 100%;

  .order-btn {
    position: fixed;
    top: 450px;
    right: 0;
    background: url("@/assets/image/2_icon_wddd.png") no-repeat;
    background-size: contain;
    width: 170px;
    height: 70px;
    z-index: 100;
  }

  .activity-rules-btn {
    position: fixed;
    top: 560px;
    right: 0;
    background: url("@/assets/image/2_icon_hdgz.png") no-repeat;
    background-size: contain;
    width: 171px;
    height: 71px;
    z-index: 100;
  }

  .home-head {
    position: relative;
    width: 100%;
    height: 866px;
    background: url("@/assets/image/2_1bg.png") no-repeat;
    background-size: contain;
    z-index: 1;
  }

  .home-central {
    position: relative;
    padding: 118px 35px 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 1363px;
    background: url("@/assets/image/2_2bg.png") no-repeat;
    background-size: contain;
    box-sizing: border-box;
    z-index: 1;


    .central-card {
      position: relative;
      width: 338px;
      height: 339px;
      //background-color: rgba(0, 0, 0, 0.6);
      .icon_have {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 177px;
        background: url("@/assets/image/icon_adequate_stock.png") no-repeat;
        background-size: contain;
        z-index: 11;
      }

      .icon_no {
        position: absolute;
        left: -10px;
        top: -20px;
        width: 150px;
        height: 150px;
        background: url("@/assets/image/icon_Already_plundered.png") no-repeat;
        background-size: contain;
        z-index: 11;

      }
    }

    .card1 {
      //background-color: rgba(156, 40, 140, 0.6);
    }

    .central-universal {
      margin-top: 18px;
      width: 674px;
      height: 174px;
      //background-color: rgba(156, 40, 140, 0.6);
    }
  }

  .home-bottom {
    position: relative;
    padding: 4px 35px 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 1549px;
    background: url("@/assets/image/2_3bg.png") no-repeat;
    background-size: contain;
    box-sizing: border-box;
    z-index: 1;


    .central-card {
      position: relative;
      width: 338px;
      height: 339px;
      //background-color: rgba(0, 0, 0, 0.6);
      .icon_have {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 177px;
        background: url("@/assets/image/icon_adequate_stock.png") no-repeat;
        background-size: contain;
        z-index: 11;
      }

      .icon_no {
        position: absolute;
        left: -10px;
        top: -20px;
        width: 150px;
        height: 150px;
        background: url("@/assets/image/icon_Already_plundered.png") no-repeat;
        background-size: contain;
        z-index: 11;
      }
    }

    .card1 {
      //background-color: rgba(156, 40, 140, 0.6);
    }

    .central-universal {
      position: absolute;
      bottom: 136px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 674px;
      height: 174px;
      //background-color: rgba(156, 40, 140, 0.6);
    }
  }

  :root .van-tab--card {
    width: 206px;
    height: 64px;
    line-height: 64px;
    color: #333333;
    border-radius: 100px 0 0 0;
    background-color: #bebcbc;
    border: none;
  }
}

</style>
